<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}{{$route.params.title}}</p>
       <ul>
        <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        <li><a href="/news/123">News-1</a></li>
        <li><a href="/news/456">News-2</a></li>
      </ul>
      <img src="~assets/img/setting.png" alt="">
      <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2>
  </div>
</template>
<script>
import axios from 'axios'
export default {
//  路由参数校验
  validate ({ params }) {
    // 一定为数字
    return /^\d+$/.test(params.newsId)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//独立设置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/14ni3i').then((res)=>{
          console.log('res',res)
          return {info:res.data}
      }) 
  }
  //ansyc…await方式
  // async asyncData(){
  //     let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
  //     return {info: data}
      
  // }
 
}
</script>
